<template>
 <el-container class="home_container">
     <!--头部 -->
  <el-header>
      <div>
          <span>学生管理系统</span>
      </div>
      <el-button type="info" @click="logout">退出</el-button>
 </el-header>
 <!--主体 -->
  <el-container>
      <!--侧边栏 -->
    <el-aside width="200px" router>
        <!--侧边栏菜单区域 -->
        <el-menu
      background-color="#333744"
      text-color="#fff"
      active-text-color="#409FFF" :unique-opened="true">
      <!--1级菜单 -->
      <el-submenu index="1">
            <!--1级菜单的模板区 -->
        <template slot="title">
             <!--1级菜单的模板区图标 -->
          <i class="el-icon-eleme"></i>
           <!--1级菜单的模板区文本-->
          <span>学生管理</span>
        </template>
         <!--2级菜单-->
         <el-menu-item index="1-4-1" @click="jump">
        <template slot="title">
             <!--2级菜单的模板区图标 -->
          <i class="el-icon-menu"></i>
           <!--2级菜单的模板区文本-->
          <span>学生信息</span>
        </template></el-menu-item>
      </el-submenu>
      <el-submenu index="2">
            <!--1级菜单的模板区 -->
        <template slot="title">
             <!--1级菜单的模板区图标 -->
          <i class="el-icon-eleme"></i>
           <!--1级菜单的模板区文本-->
          <span>学生信息管理</span>
        </template>
         <!--2级菜单-->
         <el-menu-item index="2-4-1" @click="back">
        <template slot="title">
             <!--2级菜单的模板区图标 -->
          <i class="el-icon-menu"></i>
           <!--2级菜单的模板区文本-->
          <span>学生信息添加</span>
        </template></el-menu-item>
      </el-submenu>
       <el-submenu index="3">
            <!--1级菜单的模板区 -->
        <template slot="title">
             <!--1级菜单的模板区图标 -->
          <i class="el-icon-eleme"></i>
           <!--1级菜单的模板区文本-->
          <span>课程管理</span>
        </template>
         <!--2级菜单-->
         <el-menu-item index="2-4-1" @click="course">
        <template slot="title">
             <!--2级菜单的模板区图标 -->
          <i class="el-icon-menu"></i>
           <!--2级菜单的模板区文本-->
          <span>课程信息</span>
        </template></el-menu-item>
      </el-submenu>
      <el-submenu index="4">
            <!--1级菜单的模板区 -->
        <template slot="title">
             <!--1级菜单的模板区图标 -->
          <i class="el-icon-eleme"></i>
           <!--1级菜单的模板区文本-->
          <span>课程</span>
        </template>
         <!--2级菜单-->
         <el-menu-item index="4-4-1" @click="addcourse">
        <template slot="title">
             <!--2级菜单的模板区图标 -->
          <i class="el-icon-menu"></i>
           <!--2级菜单的模板区文本-->
          <span>添加课程信息</span>
        </template></el-menu-item>
      </el-submenu>
      <el-submenu index="5">
            <!--1级菜单的模板区 -->
        <template slot="title">
             <!--1级菜单的模板区图标 -->
          <i class="el-icon-eleme"></i>
           <!--1级菜单的模板区文本-->
          <span>用户管理</span>
        </template>
         <!--2级菜单-->
         <el-menu-item index="5-4-1" @click="role">
        <template slot="title">
             <!--2级菜单的模板区图标 -->
          <i class="el-icon-menu"></i>
           <!--2级菜单的模板区文本-->
          <span>用户信息</span>
        </template></el-menu-item>
      </el-submenu>
      <el-submenu index="6">
            <!--1级菜单的模板区 -->
        <template slot="title">
             <!--1级菜单的模板区图标 -->
          <i class="el-icon-eleme"></i>
           <!--1级菜单的模板区文本-->
          <span>用户信息管理</span>
        </template>
         <!--2级菜单-->
         <el-menu-item index="6-4-1" @click="roleadd">
        <template slot="title">
             <!--2级菜单的模板区图标 -->
          <i class="el-icon-menu"></i>
           <!--2级菜单的模板区文本-->
          <span>添加用户信息</span>
        </template></el-menu-item>
      </el-submenu>
      <el-submenu index="7">
            <!--1级菜单的模板区 -->
        <template slot="title">
             <!--1级菜单的模板区图标 -->
          <i class="el-icon-eleme"></i>
           <!--1级菜单的模板区文本-->
          <span>教师管理</span>
        </template>
         <!--2级菜单-->
         <el-menu-item index="7-4-1" @click="teacher">
        <template slot="title">
             <!--2级菜单的模板区图标 -->
          <i class="el-icon-menu"></i>
           <!--2级菜单的模板区文本-->
          <span>教师信息</span>
        </template></el-menu-item>
      </el-submenu>
      <el-submenu index="8">
            <!--1级菜单的模板区 -->
        <template slot="title">
             <!--1级菜单的模板区图标 -->
          <i class="el-icon-eleme"></i>
           <!--1级菜单的模板区文本-->
          <span>教师信息管理</span>
        </template>
         <!--2级菜单-->
         <el-menu-item index="8-4-1" @click="teacheradd">
        <template slot="title">
             <!--2级菜单的模板区图标 -->
          <i class="el-icon-menu"></i>
           <!--2级菜单的模板区文本-->
          <span>教师信息添加</span>
        </template></el-menu-item>
      </el-submenu>
      <el-submenu index="9">
            <!--1级菜单的模板区 -->
        <template slot="title">
             <!--1级菜单的模板区图标 -->
          <i class="el-icon-eleme"></i>
           <!--1级菜单的模板区文本-->
          <span>成绩管理</span>
        </template>
         <!--2级菜单-->
         <el-menu-item index="9-4-1" @click="score">
        <template slot="title">
             <!--2级菜单的模板区图标 -->
          <i class="el-icon-menu"></i>
           <!--2级菜单的模板区文本-->
          <span>成绩信息</span>
        </template></el-menu-item>
      </el-submenu>
      <el-submenu index="10">
            <!--1级菜单的模板区 -->
        <template slot="title">
             <!--1级菜单的模板区图标 -->
          <i class="el-icon-eleme"></i>
           <!--1级菜单的模板区文本-->
          <span>成绩信息管理</span>
        </template>
         <!--2级菜单-->
         <el-menu-item index="10-4-1" @click="scoreadd">
        <template slot="title">
             <!--2级菜单的模板区图标 -->
          <i class="el-icon-menu"></i>
           <!--2级菜单的模板区文本-->
          <span>成绩信息添加</span>
        </template></el-menu-item>
      </el-submenu>
      <el-submenu index="11">
            <!--1级菜单的模板区 -->
        <template slot="title">
             <!--1级菜单的模板区图标 -->
          <i class="el-icon-eleme"></i>
           <!--1级菜单的模板区文本-->
          <span>查询成绩管理</span>
        </template>
         <!--2级菜单-->
         <el-menu-item index="11-4-1" @click="selectscore">
        <template slot="title">
             <!--2级菜单的模板区图标 -->
          <i class="el-icon-menu"></i>
           <!--2级菜单的模板区文本-->
          <span>查询成绩信息</span>
        </template></el-menu-item>
      </el-submenu>
      <el-submenu index="12">
            <!--1级菜单的模板区 -->
        <template slot="title">
             <!--1级菜单的模板区图标 -->
          <i class="el-icon-eleme"></i>
           <!--1级菜单的模板区文本-->
          <span>查询成绩信息管理</span>
        </template>
         <!--2级菜单-->
         <el-menu-item index="12-4-1" @click="selectcourseadd">
        <template slot="title">
             <!--2级菜单的模板区图标 -->
          <i class="el-icon-menu"></i>
           <!--2级菜单的模板区文本-->
          <span>查询成绩信息添加</span>
        </template></el-menu-item>
      </el-submenu>
    </el-menu>
    </el-aside>
    <!--右侧 -->
    <el-main>
      <router-view></router-view>
    </el-main>
  </el-container>
</el-container>
</template>
<script>
export default {
  methods: {
    logout () {
      this.$router.replace('/Login')
    },
    back () {
      this.$router.replace('/StudentAdd')
    },
    jump () {
      this.$router.replace('/StudentMain')
    },
    course () {
      this.$router.replace('/Course')
    },
    addcourse () {
      this.$router.replace('/CourseAdd')
    },
    role () {
      this.$router.replace('/Role')
    },
    roleadd () {
      this.$router.replace('/RoleAdd')
    },
    teacher () {
      this.$router.replace('/TeacherMain')
    },
    teacheradd () {
      this.$router.replace('/TeacherAdd')
    },
    score () {
      this.$router.replace('/Score')
    },
    scoreadd () {
      this.$router.replace('/ScoreAdd')
    },
    selectscore () {
      this.$router.replace('/SelectCourseMain')
    },
    selectcourseadd () {
      this.$router.replace('/SelectCourseAdd')
    }
  }
}
</script>

<style lang="less" scoped>
.home_container {
    height: 100%;
}
.el-header {
    background-color: #373d41;
    display: flex;
    justify-content: space-between;
    padding-left: 0;
    align-items: center;
    color: #fff;
    font-size: 20px;
    > div {
        display: flex;
        align-items: center;
    }
}
.el-aside {
    background-color: #333744;
}
.el-main {
    background-color: #eaedf1;
}
</style>
